<template>
  <head>
    <title>药品进销存管理系统</title>
  </head>
  <body>
  <header>
    药品进销存管理系统
  </header>
  <div class="container">
    <nav>
      <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
        <el-radio-button :value="false">展开</el-radio-button>
        <el-radio-button :value="true">收起</el-radio-button>
      </el-radio-group>
      <el-menu
          :collapse="isCollapse"
      >
        <router-link v-for="item in router_list" :to="{name:item.name}" style="text-decoration: none;">
          <el-menu-item>
            <el-icon>
              <component :is="item.meta.icon"/>
            </el-icon>
            <template #title>{{ item.meta.title }}</template>
          </el-menu-item>
        </router-link>
        <el-button @click="doExit">
          退出
        </el-button>
      </el-menu>
    </nav>
    <main>
      <router-view></router-view>
    </main>
  </div>
  </body>
</template>

<script lang="ts" setup>
import {ref, computed} from 'vue'
import {ElMenu, ElMenuItem, ElIcon} from "element-plus";
import {useRouter} from "vue-router";
import {useLoginStore} from "@/stores";

const router = useRouter()
const store = useLoginStore()

const router_list = computed(() => {
  let total_list = router.getRoutes()

  return total_list.filter(item => {
    let allowed_roles = Array.isArray(item.meta.role) ? item.meta.role : [item.meta.role]; // 确保它是一个数组
    if (item.meta.is_menu && allowed_roles.indexOf(store.role) !== -1) {
      return true
    }
  })
})

function doExit() {
  router.replace("/")
}

const isCollapse = ref(false)
</script>

<style scoped>


body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

header {
  background-color: #333;
  color: #fff;
  padding: 10px;
  text-align: center;
}

.container {
  display: flex;
  height: 95vh; /* 使容器占据整个视口高度 */
  background-color: aliceblue;
}

nav {
  background-color: #fff;
  width: 200px; /* 可以根据需要调整导航栏的宽度 */
  padding: 0;
}

main {
  flex-grow: 1; /* 使主要内容占据剩余空间 */
  padding: 10px;
}

</style>